<template >
  <div class="ys">
    <h3>实名认证</h3>
    <el-card class="box-card" type="primary">
      <el-link type="primary">请使用本人身份证信息进行认证，若使用他人身份证认证接单，将造成运费无法提现</el-link>

     </el-card>
     <br/>
      <br/>
      <br/>
      <br/>
           <br/>

       <el-card class="zpxx">
        <h4>完善以下资料并通过认证，就可以接单啦！！！</h4>
            <el-steps :active="1">
              <el-step title="身份证信息" icon="el-icon-edit"></el-step>
              <el-step title="车辆信息" icon="el-icon-upload"></el-step>
              <el-step title="完成" icon="el-icon-picture"></el-step>
            </el-steps>
         </el-card>
          <br/><br/>
          <br/><br/><br/><br/><br/><br/><br/><br/> 
        <el-col class="box">
    
           <h3 class="rz">身份证信息</h3>
           <br/><br/><br/>
         
              <el-upload
                  class="upload-demo"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将身份证照片拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">上传身份证正面</div>
                </el-upload>
         
                <el-upload
              class="upload-demo1"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将身份证照片拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">上传身份证反面</div>
            </el-upload>
          
        </el-col>
         <br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
         <br/><br/><br/><br/><br/><br/><br/><br/>

        <el-col class="box2">
           <h3 class="rz1">驾驶证信息</h3>
                   <br/>  
                  <br/>
                  <br/>
            <el-upload
                  class="upload-demo"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将上传驾驶证照片拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">上传驾驶证</div>
                </el-upload>
        </el-col>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
         <br/><br/><br/><br/><br/><br/><br/><br/>
        
                <div >
                    <button class="btn-wrap" type="button" @click="personalSubmit('personalForm')">下一步</button>
                </div>
          
        
  </div>
</template>

<script>
 export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
        
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style>
.upload-demo{
   float:left; 
    left:250px;
}
.btn-wrap{
  
   width: 20%;
    height: 70px;

     background-color: rgba(46, 117, 18, 0.381);
}
.zpxx{
   position:absolute;
    width: 100%;
    height: 170px;
    background-color: rgba(241, 244, 244, 0.033);
}
.zp1{
    margin: -1px auto; 
   float:left; 
    left:250px;
}
.zp2{
    margin: -1px auto; 
   float:left; 
    left:150px;
}
.rz{
   float:left ; 
    left: 60px;
}
.rz1{
   float:left ; 
    left: 60px;
}
 .box-card {
    position:absolute;
    width: 100%;
    height: 80px;
    background-color: rgba(194, 232, 250, 0.344);
  }
  .box {
    left: 200px;
    position:absolute;
    width: 1100px;
    height:300px;  
     background-color: rgba(178, 178, 178, 0.16);
  }
    .box2 {
    left: 200px;
    position:absolute;
    width: 1100px;
    height:300px;  
    background-color: rgba(191, 195, 195, 0.166);
  }
</style>